<template>
  <div class="flow-main-main">
    <div class="flow-main flow-detail">
      <div class="flow-row">
        <div class="flow-node">
          <el-tooltip class="flow-item" effect="dark" placement="top">
            <div slot="content">
              <div>发起人</div>
              <el-divider class="tooltip-line"></el-divider>
              <div>单位：{{ beginUser.orgName }}</div>
              <div>部门：{{ beginUser.deptName }}</div>
            </div>
            <div>
              <div class="flow-tool other">发起人</div>
              <el-divider></el-divider>
              <div class="flow-user">
                {{ beginUser.userName }}
              </div>
            </div>
          </el-tooltip>
        </div>
      </div>

      <div class="flow-row" v-for="(node, index) in flowNodes" :key="index">
        <div class="flow-node flow-arrows-2"></div>
        <div class="flow-node-arrows">
          <div class="flow-node">
            <el-tooltip class="flow-item" effect="dark" placement="top" v-for="(item, i) in node.items" :key="i">
              <div slot="content">
                <div>{{ item.nodeName }}</div>
                <template v-if="item.user">
                  <el-divider class="tooltip-line"></el-divider>
                  <div>单位：{{ item.user.orgName }}</div>
                  <div>部门：{{ item.user.deptName }}</div>
                </template>
              </div>
              <div>
                <div class="flow-tool" :class="item.status === '2' ? (item.approveResult === '1' ? 'agree' : 'disagree') : 'no-approval'">
                  <div class="flow-tool-label">
                    {{ item.nodeName }}
                  </div>
                </div>
                <el-divider></el-divider>
                <div class="flow-user">
                  {{ item.userName }}
                </div>
              </div>
            </el-tooltip>
          </div>
        </div>
      </div>

      <div class="flow-row">
        <div class="flow-node flow-arrows-2"></div>
        <div class="flow-node-arrows">
          <div class="flow-node start-end" style="border-radius: 50%;">流程结束</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Detail",
  props: {
    beginUser: Object,
    flowNodes: {
      type: Array,
      default: () => []
    }
  }
}
</script>

<style scoped>

</style>
